<template>
    <div class="bottom-bar">
        <div class="check-content">
            <CheckButton class="checkd" :isChecked="isSelectAll" @click.native="checkClick"></CheckButton>
            <span>全选</span>
        </div>
        <div class="price">
            合计：{{totolPrice}}
        </div>
        <div class="calculate" @click="calcClick">
            结算：({{checkLength}})
        </div>
    </div>
</template>
<script>
import CheckButton from './CheckButton'

import {mapGetters} from 'vuex'
export default {
    name:'CartButtonBar',
    components:{
        CheckButton
    },
    computed: {
        ...mapGetters(['cartList']),
        totolPrice(){
            // 先找到选中的
            return "￥"+this.cartList.filter(item=>{
                return item.checked
            }).reduce((preValue,item)=>{//之后在选中的里面计算
                // 返回值如果是小数会有结算误差，而且界面显示装不下，会换行，直接保留两位小数
                // preValue:前一个值       0:初始化值
                return preValue+item.newPrice*item.count
            },0).toFixed(2)
        },
        checkLength(){
            return this.cartList.filter(item=>item.checked).length
        },
        isSelectAll(){
            if(this.cartList.length===0) return false
            // 如果找不到没选中的，那就是全部选中
            // 方法一
            return !this.cartList.find(item=>!item.checked)
            // 方法二
            // for(let item of this.cartList){
            //     if(!item.checked) return false
            // }
            // return true
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        checkClick(){
            if(this.isSelectAll){
                this.cartList.forEach(item=>item.checked=false)
            }else{
                this.cartList.forEach(item=>item.checked=true)
            }
        },
        calcClick(){
            if(!this.isSelectAll){
                this.$toast.show("请选择购买的商品",2000)
            }
        }
    },
}
</script>
<style scoped>
.bottom-bar{
    height: 40px;
    background-color: #eee;
    position: fixed;
    width: 100%;
    right: 0;
    bottom: 49px;
        left: 0;
    /* top:435px;    */
    line-height: 40px;
    display: flex;
    font-size: 14px;
}
.check-content{
    display: flex;
    align-items: center;
    margin-left: 10px;
}
.checkd{
    width:20px;
    height: 20px;
    line-height: 20px;
}
.price{
    margin-left: 30px;
        

}
.calculate{
    width: 80px;
    margin-left: auto; 
    background-color: orangered;
    text-align: center;
    
}
</style>